<!--
 * @Author: Wangtao
 * @Date: 2021-04-01 11:41:07
 * @LastEditors: Wangtao
 * @LastEditTime: 2022-04-20 22:39:03
-->
<template>
  <div class="webchatSessionDetails clearfix">
    <webchatContentBox :importType="'dataCenter'" :webchatInfo="webchatInfo" :type="commonData.type" :chatType="commonData.type" class="webchatContent fl"></webchatContentBox>
    <webchatInfo :commonData="commonData" :module="module" class="webchatInfo fl"></webchatInfo>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import webchatInfo from '@/views/webchat/common/webchatInfo.vue'
import webchatContentBox from '@/views/webchat/webchatContentBox.vue'
@Component({
  name: 'webchatSessionDetails',
  components: { webchatContentBox, webchatInfo }
})
export default class WebchatSessionDetails extends Vue {
  @Prop() private commonData: any
  @Prop({ default: '' }) public module!: string;
  private $store: any

  get webchatInfo () {
    if (this.commonData.webchatDetails && this.commonData.webchatDetails._id) {
      return this.$store.state.webchat.webchatInfo[this.commonData.webchatDetails._id] || {}
    } else {
      return {}
    }
  }
}
</script>
<style lang="stylus" scoped>
  .webchatSessionDetails
    .webchatContent
      height 100%
      width 60%
      border-radius 4px
      border 1px solid #ECF0F3
    .webchatInfo
      height 100%
      width 40%
</style>
